<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { Search, Refresh } from "@element-plus/icons-vue";
// 配置axios的基础URL为/api，利用vite代理解决跨域问题
import axios from "axios";
axios.defaults.baseURL = "/api";

// 搜索表单
const searchForm = reactive({
  operateUserName: "",
});

// 表格数据
const tableData = ref([]);

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 0,
});

// 重置表单
const resetForm = () => {
  // 重置搜索表单
  Object.keys(searchForm).forEach((key) => {
    searchForm[key] = "";
  });
  // 清空后自动查询列表
  queryLogsList();
};

// 序号生成方法，从1开始
const indexMethod = (index) => {
  return (pagination.currentPage - 1) * pagination.pageSize + index + 1;
};

// 查询日志列表
const queryLogsList = async () => {
  try {
    const params = {
      page: pagination.currentPage,
      pageSize: pagination.pageSize,
      operateUserName: searchForm.operateUserName,
    };

    // 移除空字符串参数
    Object.keys(params).forEach((key) => {
      if (params[key] === "") {
        delete params[key];
      }
    });

    const response = await axios.get("/logs", { params });
    if (response.data.code === 1) {
      tableData.value = response.data.data.rows;
      pagination.total = response.data.data.total;
    } else {
      ElMessage.error(response.data.msg || "获取日志列表失败");
    }
  } catch (error) {
    console.error("获取日志列表失败:", error);
    ElMessage.error("网络错误，请稍后重试");
  }
};

// 搜索
const search = () => {
  pagination.currentPage = 1;
  queryLogsList();
};

// 分页处理
const handlePageChange = () => {
  queryLogsList();
};

// 格式化时间显示
const formatDateTime = (dateTime) => {
  if (!dateTime) return "";
  // 转换ISO格式时间为本地时间格式
  const date = new Date(dateTime);
  return date.toLocaleString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  });
};

// 组件挂载时加载数据
onMounted(() => {
  queryLogsList();
});
</script>

<template>
  <div class="logs-management">
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form :model="searchForm" label-width="80px" inline>
        <el-form-item label="操作人">
          <el-input
            v-model="searchForm.operateUserName"
            placeholder="请输入操作人"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="resetForm">
            <el-icon><Refresh /></el-icon>
            清空
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        type="index"
        :index="indexMethod"
        label="序号"
        width="80"
        align="center"
      />
      <el-table-column prop="operateUserName" label="操作人" width="120" />
      <el-table-column prop="operateTime" label="操作时间" width="180">
        <template #default="scope">
          {{ formatDateTime(scope.row.operateTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="className" label="类名" min-width="250" />
      <el-table-column prop="methodName" label="方法名" width="120" />
      <el-table-column prop="methodParams" label="请求参数" min-width="150">
        <template #default="scope">
          <el-tooltip 
            :content="scope.row.methodParams" 
            placement="top"
            effect="light"
            hide-after="100"
            :show-after="0"
          >
            <div class="text-ellipsis">{{ scope.row.methodParams }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="returnValue" label="返回值" min-width="150">
        <template #default="scope">
          <el-tooltip 
            :content="scope.row.returnValue" 
            placement="top"
            effect="light"
            hide-after="1000"
            :show-after="0"
          >
            <div class="text-ellipsis">{{ scope.row.returnValue }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="costTime" label="耗时(ms)" width="100" align="center" />
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handlePageChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<style scoped>
.logs-management {
  padding: 20px;
}

.search-container {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>